<template>
  <view class="web-view-page">
    <bg-set background="#f2f3f7" />
    <web-view
      class="web-view-page__main"
      :src="url"
      :update-title="false"
      :webview-styles="webviewStyles"
      @message="message"
    ></web-view>
  </view>
</template>

<script>
import profileAPI from "/api/modules/profile";
import storageOperation from "/utils/index";
var wv; //计划创建的webview
export default {
  name: "web-view-page",
  data() {
    return {
      userName: "",
      userPhone: "",
      userPwd: "",
      url: "",
      webviewStyles: {
        progress: false,
      },
    };
  },
  onLoad(option) {
    this.userName = option.userName;
    this.userPhone = option.userPhone;
    this.userPwd = option.userPwd;
    storageOperation.setStorageSync("fromPage", ""); //访问user-info-edit不跳转到首页
    this.url = `${profileAPI.pageBaseURL}/#/pages/profile/userInfoEdit/user-info-edit?userName=${this.userName}&userPhone=${this.userPhone}&userPwd=${this.userPwd}`;
    // 访问user-info-edit页面后重置fromPage存储
    storageOperation.setStorageSync("fromPage", "login-page");
  },
  onReady() {
    // 处理web-view位置
    // #ifdef APP-PLUS
    var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
    setTimeout(function () {
      wv = currentWebview.children()[0];
      wv.setStyle({ top: 84, height: 700 });
    }, 1000); //如果是页面初始化调用时，需要延时一下
    // #endif
  },
  methods: {
    message(e) {
      console.log("接收到来自h5的消息了");
      // 缓存userName和userPhone供登录页自动填充
      const { userName, userPhone } = e.detail.data[0];
      storageOperation.removeStorage("loginStatus");
      storageOperation.setStorageSync("userName", userName);
      storageOperation.setStorageSync("userPhone", userPhone);
    },
  },
};
</script>
<style lang="scss" scoped>
.web-view-page {
  width: 100%;
  height: 100vh;
}
</style>
